<template>
    <div class="tcdetail" v-if="this.mealDetailData">
        <div class="det-img">
            <img :src="this.detailImage[1]" alt="">
            <h3>￥{{detailPrice}}</h3>
            <p>{{detailContent}}</p>
            <!-- <span>不固定时间</span> -->
        </div>

        <div class="line-block"></div>

        <div class="fwnr"><img :src="this.detailImage[2]" alt=""></div>
        <div class="fwxz-btn">服务预定须知</div>
        <div class="fwnr"><img :src="this.detailImage[3]" alt=""></div>

        <br><br><br><br><br>
        <a href="javascript:void(0);" class="ljbuy" @click="buyBtn2">立即购买</a>

        <!-- 支付组件 Pay2 -->
        <mt-popup  v-model="popupVisible2" position="bottom" class="paybottom">
            <Pay2 :pay2Data="this.mealDetailData" @close2="close2"></Pay2>
        </mt-popup>

    </div>
</template>

<script>
import Pay2 from '@/components/Pay2.vue'
import {mapState,mapActions} from 'vuex'
export default {    
    created(){
        this.getMealDetailData(this.$route.query);
    },
    components:{
        Pay2
    },
    data(){
        return{
            popupVisible2: false
        }
    },
    computed: {
        ...mapState({
            mealDetailData:state => state.baojieModules.mealDetailData
        }),
        detailPrice(){
            return this.mealDetailData.price || '';
        },
        detailContent(){
            return this.mealDetailData.detail || '';
        },
        detailImage(){
            return this.mealDetailData.image || [];
        }
    },
    methods:{
        ...mapActions({
            getMealDetailData:'baojieModules/getMealDetailData'
        }),
        buyBtn2(){
            this.popupVisible2 = true
        },
        close2(){
            this.popupVisible2 = false
        }
    }
}
</script>


<style lang="scss">
@import "../../assets/style/bjfw.scss";
.mint-popup-bottom{
    width: 100% !important;
}
</style>


